<template>
	<view class="tabs-content" :style="props.contentTabStyle||{}">
		<view class="tabs-item" :style="props.tabStyle||{}" v-for="item,index in  props.list"
			@click="tabHandle(index,item)" :class="active==index ? 'font-b' : ''">
			{{item.name}}
			<view v-if="active==index" class="tab-line"></view>
		</view>
	</view>
</template>

<script setup>
	import { onMounted, ref } from "vue";
	const props = defineProps({
		list: { default: function() { return [] } },
		contentTabStyle: { default: function() { return {} } },
		tabStyle: { default: function() { return {} } },
		active: { default: 0 }
	})
	const active = ref(0)
	const emit = defineEmits(['tabChange'])
	onMounted(() => {
		props.active ? active.value = props.active : ''
	})
	const tabHandle = (index, item) => {
		active.value = index
		emit('tabChange', index, item)
	}
</script>

<style lang="scss" scoped>
	.tabs-content {
		display: flex;
		justify-content: space-between;
		font-size: 15px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;

		.tabs-item {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.tab-line {
			width: 20px;
			height: 2px;
			background: #409EFF;
			transform: translateY(2px);
			border-radius: 2px;
		}
	}
</style>